let oSplitLine: HTMLElement | undefined = undefined,
  oSide: HTMLElement | undefined = undefined,
  startDis: number = 0,
  endDis: number = 0,
  sideWidth: number = 0

const init = () => {
  bindEvent()
}

const bindEvent = () => {
  oSplitLine = (document.getElementsByClassName('split-line')[0] as HTMLElement)
  oSide = (document.getElementsByClassName('aside')[0] as HTMLElement)
  sideWidth = oSide.offsetWidth
  oSplitLine.addEventListener('mousedown', handleMouseDown, false)
}

const handleMouseDown = (e: MouseEvent) => {
  startDis = e.clientX

  document.addEventListener('mousemove', handleMouseMove, false)
  document.addEventListener('mouseup', handleMouseUp, false)
}

const handleMouseMove = (e: MouseEvent) => {
  endDis = e.clientX
  const distance = endDis - startDis

  if (!oSide) return
  const totalDistance = sideWidth + distance

  console.log(totalDistance)

  window.requestAnimationFrame(() => {
    oSide?.style.setProperty('width', `${totalDistance}px`)
  })
}

const handleMouseUp = (e: MouseEvent) => {
  document.removeEventListener('mousemove', handleMouseMove, false)
  document.removeEventListener('mouseup', handleMouseUp, false)
  startDis = 0
  endDis = 0
  sideWidth = oSide?.offsetWidth || 0
}

export default {
  init
}